<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput, NLayout, NLayoutContent,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";

const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '用药管理',
  initForm: {},
  doCreate: api.createMedicine,
  doDelete: api.deleteMedicine,
  doUpdate: api.updateMedicine,
  refresh: () => on_ref(),
})

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  orders: [],
  card_loading: false,
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  tab_goods: [],
  meeting_users: [],
  config: [],
  uploadAction: base_path + '/system/base/userimg',
  token: getToken(),
  keyword: "",
  medicine_show: false,
  medicine_form: {}
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})


function on_ref() {
  get_order_list()
}

function get_order_list() {
  data.card_loading = true
  api.getMedicine({
    user_id: data.select_customer.user_id,
  }).then((res) => {
    data.orders = res.data
    data.card_loading = false
    data.loading = false
  })
}


function search_order() {
  data.loading = true
  get_order_list()
}

function on_save() {
  modalForm.value.user_id = data.select_customer.user_id
  handleSave()
}

const onCreate_info = () => {
  return {
    name: '',
    num: 1,
    desc: ''
  }
}

</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">
    <div class="search">
      <NInput size="large" @change="search_order" v-model:value="data.keyword" :loading="data.loading" clearable
              type="text" placeholder="请输入项目名称检索"/>
    </div>
    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
      <n-scrollbar v-if="data.orders.length>0" style="max-height: calc(100vh - 180px);padding:0 20px 20px 0px">
        <n-collapse class="cards" accordion :default-expanded-names="[data.orders[0].id]">
          <n-collapse-item :name="item.id" v-for="item in data.orders" class="card">
            <template #header>
              <div style="display: flex; align-items: center;justify-content: flex-start">
                <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                  <div style="display: flex">
                    <!--                <n-button type="info" dashed size="large">药方单号:{{item.id}}</n-button>-->
                    <img style="width: 40px;height: 40px;border-radius: 50%;"
                         :src="item.doctor.avatar">
                    <div style="height:40px;line-height:20px;margin-left: 10px">
                <span style="margin-right: 5px">
                  {{item.doctor.name}}
                </span>
                      <br>
                      <span style="font-size: 12px;color:#747586">{{ item.created_at }}</span>
                    </div>
                  </div>
                </n-h6>
              </div>
            </template>


            <div class="project_list">

              <n-card size="small" :bordered="false" hoverable content-style="padding: 20px;"
                      :segmented="{content: true,footer: 'soft',}">
                <template #header>
                  <n-h6 prefix="bar" style="margin: 0;font-size: 14px">处方明细</n-h6>
                </template>
                <n-badge :value="'x'+item2.num" :show="1" style="margin-right: 15px;margin-bottom: 5px" v-for="item2 in item.info">
                    <div style="display: flex;background: #ececec;border-radius: 5px;padding:10px 10px;">
                      <div>
                        <img style="width: 40px;height: 40px;border-radius: 5px;"
                                src="https://sass-files.njqianyan.cn//saas/jqeqsqqTuKIwY199eKYOXS6P9rssejLKU9fiX5QS.webp">
                      </div>
                      <div style="font-size: 14px;margin-left: 5px">{{item2.name}}<br><span
                          style="font-size: 12px">{{item2.desc}}</span></div>
                    </div>
                  </n-badge>
                <template #footer>
                  <n-alert :bordered="false" type="success"   style="width: 100%;margin-top: 5px;height:50px;">
                     {{item.remark}}
                  </n-alert>


                </template>
              </n-card>


            </div>

          </n-collapse-item>
        </n-collapse>
      </n-scrollbar>
      <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
    </n-spin>

    <n-float-button :right="10" :bottom="10" shape="square" @click="handleAdd" type="primary">
      <component :is="renderIcon('material-symbols-light:add', { size: 25,color:'#fff' })"/>
    </n-float-button>

  </div>


  <n-drawer v-model:show="modalVisible" width="680px">
    <n-drawer-content title="用药记录" closable>
      <NForm
          ref="modalFormRef"
          label-placement="left"
          label-align="left"
          :label-width="100"
          :model="modalForm"
      >

        <n-layout>
          <n-layout-header>
            <n-flex>
              <n-tag size="large" style="width: 200px"> 药品名称</n-tag>
              <n-tag size="large" style="width: 100px"> 数量</n-tag>
              <n-tag size="large" style="width: 200px"> 服用方式</n-tag>

            </n-flex>
          </n-layout-header>
          <n-layout-content content-style="padding: 10px 0;">
            <n-dynamic-input v-model:value="modalForm.info" :on-create="onCreate_info">
              <template #default="{ value , index}">
                <n-flex>
                  <n-input placeholder="药品名称" v-model:value="value.name" style="width: 200px"/>
                  <n-input-number placeholder="1" min="1"  v-model:value="value.num" style="width: 100px"/>
                  <n-input placeholder="服用方式" v-model:value="value.desc" style="width: 200px"/>
                </n-flex>
              </template>
            </n-dynamic-input>
          </n-layout-content>
        </n-layout>


        <NFormItem label="" path="remark">
          <NInput type="textarea" v-model:value="modalForm.remark" placeholder="请输入备注" style="width: 100%"/>
        </NFormItem>


      </NForm>
      <template #footer>
        <n-button type="primary"  @click="on_save"><TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
      </template>

    </n-drawer-content>


  </n-drawer>


</template>


<style>
.container {
  padding: 10px;
  //transform: translate(0);
  position: relative;
  height: 100%;

  .search {
    margin-bottom: 10px;
  }
}

.cards {
  margin: 0px;
}

.project {
  margin-bottom: 10px;
}

.project_list {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 5px;

}

.add_cases {
  height: 60px;
  position: absolute;
  bottom: 0;
  background: #eee;
  width: 100%;
  padding: 10px;
  border-top-left-radius: 5px;
}

</style>